<template>
  <view class="body">
    <view class="header">
      <view class="title">{{ dataInfo.title }}+{{id}}</view>
		<view class="header-line">
    	<text class="publisher">{{ dataInfo.publisher }}</text>
    	<text class="publish-time">{{ formattedPublishTime }}</text>
    </view>
	
	</view>
	
    
    <view class="content">
      <image class="activity-image" :src="dataInfo.imgPath" mode="aspectFill"></image>
      
      <p class="description">{{ dataInfo.description }}</p>
      
      <div class="price-section">
        <text class="current-price">￥{{ dataInfo.currentPrice }}</text>
        <text class="original-price">原价：￥{{ dataInfo.originalPrice }}</text>
      </div>
      
	  <view class="content-footer">
		  <p class="deadline">截止日期：{{ formattedDeadline }}</p>
      <p class="contact-number">咨询电话：{{ dataInfo.contactNumber }}</p>
      <p class="notes">注意事项：{{ dataInfo.notes }}</p>
	  </view>
      
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted} from 'vue';
import { useRoute } from 'vue-router';
import { onLoad } from '@dcloudio/uni-app'; //引入 uni-app 的 onLoad 钩子

// 时间格式化工具函数
function formatDate(date) {
  // 手动拼接日期和时间（不依赖任何外部API）
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hour = String(date.getHours()).padStart(2, '0');
  const minute = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}/${month}/${day} ${hour}:${minute}`;
}

const route = useRoute();
const id = ref(-1);

const dataInfo = reactive({
  // 时间字段使用毫秒级时间戳
  publishTime: 1631203149000, // 2022-10-10 11:09:09
  deadline: 1631206799000,    // 2022-10-10 23:59:00
  title: "北京四日追花拍摄秘籍-故宫",
  publisher: "济源广播旅游团",
  description: "为了丰富小区业主周末生活，提高业主幸福感，焦作公交集团推出《公交进社区带您游焦作》的周边游活动。《梦桃源温泉专线》根据报名人数派发车辆（最少30人起发）；本周日上午9点发车。约半小时车程到达梦桃源水城温泉。",
  imgPath: "https://ts1.cn.mm.bing.net/th?id=OLC.0IbZpji2vg4aRw480x360&w=210&h=140&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2",
  currentPrice: 99.00,
  originalPrice: 199.00,
  contactNumber: "0379-66666666",
  notes: "暂无"
});



// 计算属性用于格式化时间
const formattedPublishTime = ref(
  formatDate(new Date(dataInfo.publishTime), 'yyyy/MM/dd HH:mm')
);
const formattedDeadline = ref(
  formatDate(new Date(dataInfo.deadline), 'yyyy-MM-dd HH:mm')
);

onLoad(()=> {
				// 获取上一个页面传过来的数据
				const pages = getCurrentPages();  // 无需import
				const page = pages[pages.length - 1];
				const eventChannel = page.getOpenerEventChannel();
				eventChannel.on('discountInfo', (data) => {
					console.log("discountId:"+data.id);
					id.value=data.id;
				})
			})
</script>

<style>
.body {
  padding: 20px;
}

.header {
  display: flex;
  flex-wrap: wrap;
  
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
}
.header>view{
	width: 100%;
	text-align: center;;
}
.title{
	font-size: 20px;
	margin-bottom: 20px;
}
.header-line{
	display: flex;
	justify-content: space-between;
}

.publisher {
  font-size: 14px;
  color: #666;
}

.publish-time {
  font-size: 14px;
  color: #999;
}

.content {
  margin-top: 20px;
}
.content image{
	height: 220px;
}

.activity-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.description {
  text-indent: 4ex;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.current-price {
  font-size: 18px;
  font-weight: bold;
  color: #e60000;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

.content-footer>p {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

</style>